import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router' ;   
import { fetchUsers,fetchGroups,fetchTags,deleteUser } from "../../actions/usersActions";
import isEmpty from 'lodash/isEmpty';
import UserList from '../../components/users/UserList' ; 
import TabsMenu  from '../../components/tabsmenu';  
import { Row, Col,Button } from 'antd';  
var sourceData = [];
var defaultPagination =  { pageSize:10,current:1} ;
import "./style.css";
class AdminUserContainer extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            pagination:defaultPagination,
            loading: false,
            selectedRowKeys:[]
        }
    }

    componentDidMount(){
        this.props.fetchGroups();
        this.props.fetchTags();
        this.fetchUsers(this.state.pagination);
    }

    fetchUsers = (pagination,filters) => {
        filters = filters || null; 
        this.setState({ loading: true });
        pagination = pagination || defaultPagination;

        this.props.fetchUsers("*",pagination.current,pagination.pageSize,filters).then(
          (res) =>{ 
              pagination.total = this.props.total;
              this.setState({
                    loading: false,
                    pagination, 
              });
            }
         );
    }

    handleTableChange = (pagination, filters, sorter) => {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager,
        });
    }
    
    handlerSelectChange = (selectedRowKeys) => {
        this.setState({ selectedRowKeys });
    }

    handlerMenuSelect = (tab, selectedKeys) => {
        //reset pagination
        var pagination = defaultPagination ;
        if ( tab === "1") {
            this.fetchUsers(pagination,{"filter_by":"group","filter_id":selectedKeys[0]});
        }else {
            this.fetchUsers(pagination,{"filter_by":"tag","filter_id":selectedKeys[0]});
        }
    }

    handlerDeleteClick = () => {
        this.setState({ loading: true });
        var ids = this.state.selectedRowKeys ;
        this.props.deleteUser(ids).then(
            (res) => { this.setState({ loading: false }); }
        )
    }

    render(){
        var { users,groups,tags }  = this.props ;
        
        if ( isEmpty( users )) {
            users = [];
        }

        sourceData = [
            {key:"1",name:"群组",data:groups},
            {key:"2",name:"标签",data:tags}, 
        ];

        return (
            <div className="users-container">
                <Row gutter={16}>
                    <Col span={4}>
                        <TabsMenu sourceData={sourceData} onSelect={this.handlerMenuSelect}/>
                    </Col>
                    <Col span={20}>
                            <div className="action-bar">
                                <Button type="primary"><Link to={`/admin/users/add`} > 新增 </Link> </Button> 
                                <Button type="danger" onClick={this.handlerDeleteClick} disabled={isEmpty(this.state.selectedRowKeys)}>  删除   </Button>
                            </div>
                            <UserList 
                                data={users} 
                                handleTableChange={this.handleTableChange}
                                pagination={this.state.pagination}
                                loading={this.state.loading}
                                onSelectChange={this.handlerSelectChange}
                            />
                    </Col>
                </Row>
            </div>
        )
    }
}

AdminUserContainer.propTypes = {
    fetchUsers: React.PropTypes.func.isRequired,
    fetchGroups: React.PropTypes.func.isRequired,
    fetchTags: React.PropTypes.func.isRequired,
    deleteUser:React.PropTypes.func.isRequired,
};


AdminUserContainer.contextTypes = {
  router: React.PropTypes.object.isRequired
}

const mapStateToProps = (state) => {
  return { 
      users: state.user.users,
      groups: state.user.groups,
      tags:state.user.tags
  }
}

export default connect(mapStateToProps, { fetchUsers,fetchGroups,fetchTags,deleteUser})(AdminUserContainer);